<template>
    <div class="personal">
        <header>
            <span @click="GoBack()"><van-icon name="arrow-left"/></span>
            <p>个人资料</p>
            <span @click="saveMyData()">保存</span>
        </header>
        <section>
            <ul>
                <li>
                    <span>上传头像</span>
                    <span>
                        <van-uploader  :after-read="afterRead">
                            <van-image
                                    round
                                    width="0.8rem"
                                    height="0.8rem"
                                    :src="headImg"
                            />
                        </van-uploader>
                    </span>

                </li>
                <li><span>昵称</span><p><input type="text" v-model="nickname"/><van-icon name="arrow" /></p></li>
                <li><span>性别</span><p @click="openAction()"><span>{{gender}}</span><van-icon name="arrow" /></p></li>
            </ul>
            <van-action-sheet
                    v-model="show"
                    :actions="actions"
                    cancel-text="取消"
                    @cancel="onCancel"
                    @select="onSelects"
            />
        </section>
    </div>
</template>
<script>
    import {uploadheadimg} from "../../utils";
    import {saveMyPage} from "../../api/list/list";

    export default {
        name: 'personal',
        data() {
            return {
                userData: [],
                imgUpLoad: [],
                nickname:'',
                show: false,
                actions:[{name:'男'},{name:'女'}],
                gender:'',
                headImg:'',
                head:''
            }
        },
        created() {
            this.userData = JSON.parse(this.$route.query.pageData)
            console.log(this.userData)
            this.nickname = this.userData.nickname
            this.gender = this.userData.gender == 1?'男':'女'
            this.headImg = this.userData.head
        },
        methods: {
            GoBack() {
                history.go(-1)
            },
            afterRead(file) {
                // 此时可以自行将文件上传至服务器
                console.log(file);
                //文件读取完成后的回调函数
                let content = file.file;
                console.log(content)
                const params = {
                    headfile : content
                }
                uploadheadimg('/user/myinfo/formdatahead?token=1ec949a15fb709370f',
                    (res)=>{
                        console.log(res.data.data.msbox)
                        this.headImg = 'http://vueshop.glbuys.com/userfiles/head/'+res.data.data.msbox
                        this.head = res.data.data.msbox
                    }
                ,params)

            },
            onCancel() {
                this.show = false;
                // Toast('cancel');
            },
            openAction(){
                this.show = true
            },
            onSelects(item){
                console.log(item)
                this.show = false;
                this.gender = item.name
            },
            saveMyData(){
                const params = {
                    uid : this.userData.uid,
                    nickname : this.nickname,
                    gender : this.gender == '男'?1:2,
                    head : this.head,
                    token:'1ec949a15fb709370f'
                }
                saveMyPage(params).then((res)=>{
                    if(res.data.code == 200){
                        this.$toast.success('保存成功')
                        history.go(-1)
                    }else{
                        this.$toast.fail('保存失败')
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .personal {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        header {
            width: 100%;
            height: 1rem;
            display: flex;
            border-bottom: 1px solid #efefef;

            span {
                width: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.4rem;
            }

            p {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.32rem;
            }

            span:last-child {
                font-size: 0.28rem;
            }
        }
        section{
            flex: 1;
            ul{
               width: 100%;
                li{
                    width: 100%;
                    border-bottom: 1px solid #efefef;
                    line-height: 1rem;
                    padding: 0 0.2rem;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span{
                        width: 0.8rem;
                        text-align: left;
                    }
                    p{
                        width: 1rem;
                        text-align: left;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        i{
                            font-size: 0.4rem;
                        }
                    }
                }
                li:first-child{

                    span{
                        width: 1rem;
                        height: 1rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    span:last-child{
                        width: 1.4rem;
                        height: 1rem;
                        padding-top: 0.4rem;
                        box-sizing: border-box;
                    }
                }
                li:nth-child(2){
                    p{
                        width: 2rem;
                        display: flex;
                        input{
                            width: 1.5rem;
                            text-align: right;
                        }
                    }
                }
            }
        }
    }
</style>
